<template>
  <el-drawer
    :title="isEdit?'修改路由':'新增路由'"
    :visible.sync="visible"
    @close="$emit('update:show', false)"
    direction="rtl"
    custom-class="edit-drawer"
    ref="editDrawer"
  >
    <div class="demo-drawer__content">
      <el-form label-width="auto" :rules="rules" :model="params" ref="editForm" size="small">
        <el-divider content-position="left">基础配置</el-divider>
        <el-form-item label="路由名称" prop="routName">
          <el-input placeholder="请输入路由名称" v-model="params.routName"></el-input>
        </el-form-item>
        <el-form-item label="路由标识" prop="routId">
          <el-input placeholder="请输入路由标识" v-model="params.routId"></el-input>
        </el-form-item>
        <el-form-item label="配对前缀" prop="routPath">
          <el-input placeholder="请输入地址前缀" v-model="params.routPath"></el-input>
          <!--<div class="text-light">示例：/path/**</div>-->
        </el-form-item>
        <el-form-item label="忽略前缀">
          <el-input-number v-model="params.stripPrefix" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="路由方式">
          <el-select v-model="params.routType" placeholder="请选择">
            <el-option
              v-for="item in routTypeOpts"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="代理地址" prop="routUrl">
          <el-input placeholder="请输入代理地址" v-model="params.routUrl">
            <template slot="prepend">{{params.routType}}://</template>
          </el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-switch
            v-model="params.state"
            :active-value='1'
            :inactive-value='0'
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="启用">
          </el-switch>
        </el-form-item>
        <el-divider content-position="left">失败重试</el-divider>
        <el-alert
          title="失败重试次数为0即认为不重试"
          type="info"
          style="margin-bottom: 10px;"
          :closable="false"
          show-icon>
        </el-alert>
        <el-form-item label="失败重试">
          <el-input-number v-model="params.routRetry" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="重试代码">
          <dictionary-select v-model="params.retrySeries" parent-code="req-serie" :multiple="true"></dictionary-select>
        </el-form-item>
        <el-form-item label="重试状态">
          <dictionary-select v-model="params.retryStatus" parent-code="req-status" :multiple="true"></dictionary-select>
        </el-form-item>
        <el-form-item label="重试方法">
          <dictionary-select v-model="params.retryMethod" parent-code="req-method" :multiple="true"></dictionary-select>
        </el-form-item>
        <el-form-item label="重试报错">
          <dictionary-select v-model="params.retryExcep" parent-code="req-excp" :multiple="true"></dictionary-select>
        </el-form-item>
      </el-form>

      <div class="demo-drawer__footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">保 存</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
  import DictionarySelect from '../../common/DictionarySelect'

  export default {
    name: "AddEditRouterDialog",
    components: {
      DictionarySelect
    },
    props: {
      show: {
        type: Boolean,
        default: false
      },
      editData: null
    },
    watch: {
      show() {
        this.visible = this.show;
        if (!this.editData) {
          for (let k in this.params) {
            this.params[k] = '';
          }
          this.params.retrySeries = [];
          this.params.retryStatus = [];
          this.params.retryMethod = [];
          this.params.retryExcep = [];
          this.params.routType = 'lb';
          this.params.state = 1;
          this.isEdit = false;
        }
      },
      editData: {
        handler() {
          if (this.editData) {
            for (let k in this.params) {
              this.params[k] = this.editData[k] ? this.editData[k] : null;
            }
            this.params.retrySeries = this.params.retrySeries ? this.params.retrySeries.split(',') : [];
            this.params.retryStatus = this.params.retryStatus ? this.params.retryStatus.split(',') : [];
            this.params.retryMethod = this.params.retryMethod ? this.params.retryMethod.split(',') : [];
            this.params.retryExcep = this.params.retryExcep ? this.params.retryExcep.split(',') : [];
            this.isEdit = true;
          }
        },
        immediate: true,
        deep: true
      }
    }
    ,
    data() {
      return {
        visible: this.show,
        isEdit: false,
        params: {
          id: '',
          routId: '',
          routName: '',
          routPath: '',
          routType: 'lb',
          routUrl: '',
          stripPrefix: 0,
          routRetry: 0,
          retrySeries: [],
          retryStatus: [],
          retryMethod: [],
          retryExcep: [],
          state: 1
        },
        rules: {
          routName: [
            {required: true, message: '路由名称不能为空', trigger: 'blur'}
          ],
          routId: [
            {required: true, message: '路由标识不能为空', trigger: 'blur'}
          ],
          routPath: [
            {required: true, message: '路由前缀不能为空', trigger: 'blur'}
          ],
          routUrl: [
            {required: true, message: '代理地址不能为空', trigger: 'blur'}
          ]
        },
        routTypeOpts: [
          {label: '注册服务名', value: 'lb'},
          {label: '注册服务名(websocket)', value: 'lb:ws'},
          {label: 'HTTP', value: 'http'},
          {label: 'HTTPS', value: 'https'}
        ]
      }
    },
    methods: {
      saveEdit: function () {
        this.$refs['editForm'].validate((valid) => {
          if (valid) {
            let _url = '';
            if (!this.isEdit) {
              _url = '/bucket-system/gateway/router/add';
            } else {
              _url = '/bucket-system/gateway/router/update';
            }
            let newParams = {};
            for (let k in this.params) {
              newParams[k] = this.params[k];
            }
            newParams.retrySeries = newParams.retrySeries.join(',');
            newParams.retryStatus = newParams.retryStatus.join(',');
            newParams.retryMethod = newParams.retryMethod.join(',');
            newParams.retryExcep = newParams.retryExcep.join(',');

            this.api.post(_url, newParams)
              .then((data) => {
                if (data.code === 200) {
                  this.visible = false;
                  this.$message({
                    message: '保存成功',
                    type: 'success'
                  });
                  this.$parent.query();
                } else {
                  this.$message.error(data.data);
                }
              });
          } else {
            return false;
          }
        });
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss">
  .el-drawer__body {
    overflow: auto;
  }
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
  .edit-drawer {

  .demo-drawer__content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 20px 20px 20px;
    overflow: auto;

  form {
    flex-grow: 1;
  }

  .demo-drawer__footer {
    display: flex;

  button {
    flex: 1;
  }

  }
  }
  }

  .text-light {
    color: #c0c4cc;
  }
</style>
